body{
  background-image: url("/Home Page/Pictures/lisepisode2.gif");
  background-size: cover;
  min-height: 100vh;
  min-height: 100dvh;
}

.gridcontainer{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
  column-gap: 4em;
  place-content: center;
  grid-template-areas: 
  "weekly header calendar"
  "navbar main sidebar"
  ;
}



.weekly{
  grid-area: weekly;
  justify-self: end;
  align-self: center;
  width: 100%;
}

.weeklybackground{
  background-image: url("/Home Page/Pictures/sweater1.jpg");
  background-size: cover;
  height: inherit;
  border: 1px solid grey;
}

.weeklyletter{
  margin: auto;
}

.calendar{
  grid-area: calendar;
  justify-self: start;
  align-self: center;
  width: 100%;
}

.calendarbackground{
  background-image: url("/Home Page/Pictures/treesunset.jpg");
  background-size: cover;
  height: inherit;
  border: 1px solid grey;
}

.header{
  grid-area: header;
  align-self: center;
  width: auto;
}

.headerbackground{
  background-image: url("/Home Page/Pictures/treesky.jpg");
  background-size: cover;
  background-position: center;
  height: inherit;

  text-align: right;
  align-content: end;
  font-size: 30px;
  font-family: damsterdam;
  color: #f5e7b8;
  border: 1px solid grey;
  padding-right: 10px;
}

.navbar{
  grid-area: navbar;
  justify-self: end;
  align-self: center;
  width: 100%;
}

.main{
  grid-area: main;
}

.sidebar{
  grid-area: sidebar;
  justify-self: start;
  align-self: center;
  width: 100%;
}

.sidebarbackground{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
  "circle"
  "gifselect"
  "sidebarbox";

  background: url("/Home Page/Pictures/palustre.jpg");
  background-size: cover;
  background-position-x: left;
  height: inherit;
  width: inherit;
  border: 1px solid black;
  border-bottom: 0px;
  border-top: 2px;
}

.sidebarcircle{
  grid-area: circle;

  justify-self: center;
  border: 1px solid black; 
  border-radius: 100px;
  height: 160px; 
  width: 160px;
  margin-top: 25px;
  margin-bottom: 10px; 
  background-size: cover;
  background-position: center;
  box-shadow: 2px 2px;
  overflow: hidden;
}

.sidebarcircle img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
}

.gifselect{
  grid-area: gifselect;
  margin-top: 15px;
}

.sidebarbox{
  align-self: center;
  justify-self: center;
  border-radius: 15px;
  margin-bottom: 25px;
  background-color: aquamarine;
  border: 1px solid black;
  width: inherit;
  height: 190px;
  overflow-y: auto;
}

.sidebarbox h2{
  font-family: Max Diary;
  text-align: center;
}







.moveleftright{
  animation: jitter 0.8s infinite steps(2, end);
}

@keyframes jitter{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(15deg);
  }
}



@font-face {
  font-family: damsterdam;
  src: url("/Fonts/Damsterdam.ttf");
}

@font-face {
  font-family: Max Diary;
  src: url("/Fonts/Dudu\ Calligraphy.ttf");
}